<template lang="">
	<view class="order-card">
		<view class="tab-info">
			<view class="user-info">
				<!-- 默认数据，避免接口数据为空而导致的渲染问题 -->
				<u-avatar
					:src="(type==1?goodsInfo.buyerAvatar:goodsInfo.sellerAvatar)"
					size="48rpx"
				/>
				<text>{{type==1?goodsInfo.buyerName :goodsInfo.sellerName}}</text>
			</view>
			<text>{{state}}</text>
		</view>

		<view
			class="goods-info"
			@click="linkTo('/packages/MallPages/GoodDetail/index',goodsInfo)"
		>
			<u-image
				:src="goodsInfo.image || 'https://wanji-img.huashengls.com/wp-content/uploads/2019072121023763.png'"
				mode="aspectFill"
				width="224rpx"
				height="224rpx"

				radius="16rpx"
			/>
			<view class="right-bar">
				<text class="title">{{goodsInfo.title || '哎嘿出错啦'}}</text>
				<view class="price">
					<text class="word">实付款</text>
					<text class="number">￥{{goodsInfo.price || '999'}}</text>
				</view>
			</view>
		</view>

		<view
			class="foot-bar"
			v-if="orderType === 1"
		>
			<view
				class="cancel btn"
				@click="cancelOrder"
			>
				<text>取消订单</text>
			</view>
			<view
				class="cancel btn"
				@click="clickSeller"
			>
				<text>{{'联系卖家'}}</text>
			</view>
			<view
				class="comment btn"
				@click="linkTo('/packages/MyWorld/TransactionDetails/index', goodsInfo)"
			>
				<text>确认收货</text>
			</view>
		</view>

		<view
			class="foot-bar"
			v-else-if="orderType === 2"
		>
			<view
				class="cancel btn"
				@click="clickSeller"
			>
				<text>{{Buy}}</text>
			</view>
			<view
				class="comment btn"
				@click="linkTo('/packages/MyWorld/evaluation/index',goodsInfo)"
			>
				<text>去评价</text>
			</view>
		</view>

		<view
			class="foot-bar"
			v-else
		>
			<view
				class="gray btn"
				@click="clickSeller"
			>
				<text>联系卖家</text>
			</view>
			<view
				class="detail btn"
				@click="linkTo('/packages/MyWorld/TransactionDetails/index', goodsInfo)"
			>
				<text>查看详情</text>
			</view>
		</view>
	</view>
</template>
<script>
import { orderStatus } from '@/assets/js/school.js'
export default {
  data() {
    return {

    }
  },
  props: {
    goodsInfo: {
      type: Object,
      default() {
        // 商品的默认值, 对接口数据过滤，减少组件和接口数据的耦合
        return {
          // 数据格式
          avatar: '',
          name: '',
          image: '',
          title: '',
          price: ''
        }
      },

    },
    type: {
      type: Number
    },
    orderType: {
      // 表示订单的三种状态 1:进行中 2:交易完成未评价 3:评价完成
      type: Number,
      default: 1
    },
    state: {
      type: String,
      default: '进行中'
    }
  },
  computed: {
    Buy() {
      return this.type ? '联系买家' : '联系卖家'
    }
  },
  methods: {
    cancelOrder() {
      this.$emit('cancelOrder')
    },
    clickSeller() {
      this.$emit('clickSeller')
    }
  },
}
</script>
<style lang="scss">
.order-card {
	margin-top: 16rpx;
	width: 100wh;
	padding: 32rpx;
	background-color: #ffffff;
	border-radius: 16rpx;
	.tab-info {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		color: #EC493B;
		.user-info {
			display: flex;
			flex-direction: row;
			align-items: center;
			text {
				color: #797979;
				font-size: 24rpx;
				margin-left: 8rpx;
			}
		}

	}

	.goods-info {
		margin-top: 32rpx;
		display: flex;
		flex-direction: row;
		.image {
			width: 224rpx;
			height: calc(224rpx * 3 / 4);
			border-radius: 16rpx;
			margin-right: 32rpx;
		}
		.right-bar {
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-left: 32rpx;
			.title {
				color: #000000;
				text-align: left;
				font-size: 32rpx;
				font-weight: 600;
			}
			.price {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				width: 100%;
				padding-bottom: 16rpx;
				.word {
					font-size: 24rpx;
					color: #000000;
				}
				.number {
					color: #EC493B;
					font-size: 30rpx;
					font-weight: 600;
				}
			}
		}
	}

	.foot-bar {
		margin-top: 32rpx;
		display: flex;
		justify-content: flex-end;
		.btn {
			height: 64rpx;
			line-height: 64rpx;
			text-align: center;
			border-radius: 40rpx;
			font-size: 28rpx;

		}
		.cancel {
			width: 167rpx;
			color: #3A62E9;
			background-color: #ffffff;
			border: 2rpx #3A62E9 solid;
			margin-right: 16rpx;
		}
		.comment {
			width: 290rpx;
			background-color: #3A62E9;
			color: #ffffff;
		}
		.gray {
			width: 167rpx;
			background-color: #ffffff;
			border: 2rpx solid #B5B5B5;
			color: #B5B5B5;
			margin-right: 16rpx;
		}
		.detail {
			color: #B5B5B5;
			background-color: #F0F2F5;
			width: 290rpx;
		}
	}
}
</style>
